<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>新增用户信息</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link href="css/create_update.css" rel="stylesheet">
</head>

<body>
<h1>新增用户信息界面</h1>

<div class="main_body">
    <form id="mainForm">
        <div class="form-group">
            <label for="name">姓名:</label>
            <input class="form-control " id="name" name="name" placeholder="请输入用户姓名" type="text">
        </div>

        <div class="form-group">
            <label for="carNumber">车牌号:</label>
            <input class="form-control" id="carNumber" name="carNumber" placeholder="请输入用户车牌号" type="text">
        </div>

        <div class="form-group">
            <label for="phone">手机号:</label>
            <input class="form-control" id="phone" name="phone" placeholder="请输入用户手机号" type="text">
        </div>

        <div class="text-center form-group">
            <button class="btn btn-default" onclick="resetForm()" style="margin-right: 10px" type="button">重置</button>
            <button class="btn btn-default" type="submit">确认</button>
        </div>
    </form>

    <div class="btn_return">
        <button class="btn btn-info" onclick="javascript:location.href ='index.html';">返回主页</button>
    </div>
</div>


<script>
    function resetForm() {
        var inputs = $("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].value = '';
        }
    }

    function confirmChanges() {
        //校验非空
        let name = $("#name");
        if (name.val() === "") {
            name.addClass("alert-danger");
            return false;
        }
        name.removeClass("alert-danger");
        name = name.val();

        var carNumber = $("input[name='carNumber']");
        if (carNumber.val() === "") {
            carNumber.addClass("alert-danger");
            return false;
        }

        var carNumber_reg = /^[\u4e00-\u9fa5][A-Z](([0-9A-Z]{5})|([0-9A-Z]{6}))([DF])?$/;
        if (!carNumber_reg.test(carNumber.val())) {
            alert(false);
            carNumber.addClass("alert-danger");
            return false;
        }
        carNumber.removeClass("alert-danger");
        carNumber = carNumber.val();

        let phone = $("#phone");
        if (phone.val() === "") {
            phone.addClass("alert-danger");
            return false;
        }
        phone.removeClass("alert-danger");
        phone = phone.val();

        $.ajax({
            url: "/users", // 请求路径
            type: "post", //请求方式
            data: JSON.stringify({name, carNumber, phone}),
            dataTypes: "json",
            headers: {'Content-Type': 'application/json',},
            success: function (data) {//响应成功后的回调函数
                if (data.code === 1) {
                    alert(data.data);
                    location.href = 'index.html';
                } else {
                    alert(data.msg);
                }
            },
            error: function () {//请求响应出现错误会执行的回调函数
                alert("出错啦...")
            },
            dataType: "json"//设置接受到的响应数据的格式
        });

        return false;
    }

    $(function () {
        $("#mainForm").submit(function () {
            return confirmChanges();
        });
    });
</script>
</body>
</html>  